﻿<UserControl x:Class="Citrix.XaAdminMobile.Resources.SmallLoadingAnimation" x:Name="ThisLoadingControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Citrix.XaAdminMobile.Resources"
             IsVisibleChanged="UserControl_IsVisibleChanged" Width="18" Height="18">

  <UserControl.Resources>

    <Storyboard x:Key="LoadingAnimation" RepeatBehavior="Forever" Timeline.DesiredFrameRate="20">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="block1" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="block2" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.13"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.2450000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.13"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="block3" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.25"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.4950000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.25"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="block4" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.38"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7450000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.38"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="block5" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9950000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.5"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="block6" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.63"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01.2450000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01.2500000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.63"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="block7" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.75"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01.4950000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.75"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="block8" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.88"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01.7450000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01.7500000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.88"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </UserControl.Resources>

  <Canvas>
    <Grid Canvas.Left="8">
      <local:ThinBlock x:Name="block1" RenderTransformOrigin="0.5,1.5"
                       HorizontalAlignment="Left" VerticalAlignment="Top"
                       Foreground="{Binding Path=Foreground, ElementName=ThisLoadingControl}"/>
      <local:ThinBlock x:Name="block2" RenderTransformOrigin="0.5,1.5"
                       HorizontalAlignment="Left" VerticalAlignment="Top"
                       Foreground="{Binding Path=Foreground, ElementName=ThisLoadingControl}">
        <local:ThinBlock.RenderTransform>
          <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="45"/>
            <TranslateTransform/>
          </TransformGroup>
        </local:ThinBlock.RenderTransform>
      </local:ThinBlock>
      <local:ThinBlock x:Name="block3" RenderTransformOrigin="0.5,1.5"
                       HorizontalAlignment="Left" VerticalAlignment="Top" 
                       Foreground="{Binding Path=Foreground, ElementName=ThisLoadingControl}">
        <local:ThinBlock.RenderTransform>
          <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="90"/>
            <TranslateTransform/>
          </TransformGroup>
        </local:ThinBlock.RenderTransform>
      </local:ThinBlock>
      <local:ThinBlock x:Name="block4" RenderTransformOrigin="0.5,1.5"
                       HorizontalAlignment="Left" VerticalAlignment="Top"
                       Foreground="{Binding Path=Foreground, ElementName=ThisLoadingControl}">
        <local:ThinBlock.RenderTransform>
          <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="135"/>
            <TranslateTransform/>
          </TransformGroup>
        </local:ThinBlock.RenderTransform>
      </local:ThinBlock>
      <local:ThinBlock x:Name="block5" RenderTransformOrigin="0.5,1.5"
                       HorizontalAlignment="Left" VerticalAlignment="Top"
                       Foreground="{Binding Path=Foreground, ElementName=ThisLoadingControl}">
        <local:ThinBlock.RenderTransform>
          <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="180"/>
            <TranslateTransform/>
          </TransformGroup>
        </local:ThinBlock.RenderTransform>
      </local:ThinBlock>
      <local:ThinBlock x:Name="block6" RenderTransformOrigin="0.5,1.5"
                       HorizontalAlignment="Left" VerticalAlignment="Top"
                       Foreground="{Binding Path=Foreground, ElementName=ThisLoadingControl}">
        <local:ThinBlock.RenderTransform>
          <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="225"/>
            <TranslateTransform/>
          </TransformGroup>
        </local:ThinBlock.RenderTransform>
      </local:ThinBlock>
      <local:ThinBlock x:Name="block7" RenderTransformOrigin="0.5,1.5"
                       HorizontalAlignment="Left" VerticalAlignment="Top"
                       Foreground="{Binding Path=Foreground, ElementName=ThisLoadingControl}">
        <local:ThinBlock.RenderTransform>
          <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="270"/>
            <TranslateTransform/>
          </TransformGroup>
        </local:ThinBlock.RenderTransform>
      </local:ThinBlock>
      <local:ThinBlock x:Name="block8" RenderTransformOrigin="0.5,1.5"
                       HorizontalAlignment="Left" VerticalAlignment="Top"
                       Foreground="{Binding Path=Foreground, ElementName=ThisLoadingControl}">
        <local:ThinBlock.RenderTransform>
          <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="315"/>
            <TranslateTransform/>
          </TransformGroup>
        </local:ThinBlock.RenderTransform>
      </local:ThinBlock>
    </Grid>
  </Canvas>
</UserControl>
